/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */

.placeholder {
  composes: placeholder from global;
}

.tab {
  position: relative;
  font-weight: normal;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;

  height: 32px;
  border-bottom: solid 2px transparent;

  &:global([aria-selected='true']) {
    font-weight: 500;
    cursor: auto;
    border-bottom-color: var(--theme-primary);
    opacity: 1;

    &:not(:focus-visible):before {
      display: none;
    }
  }

  &:not(:global([aria-selected='true'])) {
    background-color: transparent !important;
  }
}

.actions:not(:empty) + .tab {
  padding-right: 14px;
}

.tabInner {
  composes: theme-typography--body2 tab from global;
  display: grid;
  position: relative;
}

.tabInnerSelected .portal,
.tabInner:hover .portal,
.tabInner:focus-within .portal,
.tabInnerSelected .tabAction,
.tabInner:hover .tabAction,
.tabInner:focus-within .tabAction {
  visibility: visible;
}

.tabContainer {
  max-width: 240px;
  height: 100%;
  display: flex;
  flex-shrink: 0;
  text-align: left;
  align-items: center;
}

.tabOuter {
  display: block;
  position: relative;
}

.dragging {
  opacity: 0.5;
}

.dropBefore::before,
.dropAfter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--theme-primary);
  animation: var(--tw-animate-pulse);
}

.dropBefore::before {
  left: -1px;
}

.dropAfter::after {
  right: -1px;
}
